<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基于js的星级评分</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.starts{			
				padding-left: 40%;
				padding-top:100px;			
			}
			.starts ul{
				float:left;
			}
			.starts ul li{
				list-style: none;
				width:32px;
				height:21px;
				float:left;
				background:url(images/stark2.png) no-repeat;
				
			}
			.starts ul li.on{
				background:url(images/stars2.png) no-repeat;
			}
			.starts ul span{
				display:inline;
				float:left;
				padding-left:10px;
				height:21px;
				line-height:21px;
			}
		</style>
	</head>
	<body>
		<div class="starts">
			<ul id = "pingStar">
				<li rel = "1" title = "特别差，给1分"></li>
				<li rel = "2" title = "很差，给2分"></li>
				<li rel = "3" title = "一般，给3分"></li>
				<li rel = "4" title = "很好，给4分"></li>
				<li rel = "5" title = "非常好，给5分"></li>
				<span id="dir"></span>
			</ul>
			<input type="hidden" value="" id = "startP" />
		</div>
		<script>
			window.onload = function(){
				var s = document.getElementById("pingStar");
				    m = document.getElementById("dir"),
				    n = s.getElementsByTagName("li"),
				    input = document.getElementById("startP");//保存所选值
				clearAll = function(){
					for(var i = 0;i < n.length;i++){
						n[i].className = "";
					}
				}
				for(var i = 0;i < n.length;i++){
					n[i].onclick = function(){
						var q = this.getAttribute("rel");
						clearAll();
						input.value = q;
						for(var i = 0;i < q;i++){
							n[i].className = "on";
						}
						m.innerHTML = this.getAttribute("title");
					}
					n[i].onmouseover = function(){
						var q = this.getAttribute("rel");
						clearAll();
						for(var i = 0;i < q;i++){
							n[i].className = "on";
						}
						m.innerHTML = this.getAttribute("title");
					}
					n[i].onmouseout = function(){
						clearAll();
						for(var i = 0;i < input.value;i++){
							n[i].className = "on";
						}
						
					}
				}
			}
			
		</script>
	</body>
</html>
